<div class="section">
    <div class="header">
        <i class="settings-icon"></i>
        Options
    </div>
    <div class="body">
        <div class="form-check">
            <input id="openOnRun"
                   class="form-check-input"
                   type="checkbox"
                   checked.bind="settings.results.openOnRun">
            <label class="form-check-label" for="openOnRun">
                Open when script runs
            </label>
        </div>
        <div class="form-check">
            <input id="textWrap"
                   class="form-check-input"
                   type="checkbox"
                   checked.bind="settings.results.textWrap">
            <label class="form-check-label" for="textWrap">
                Text wrap
            </label>
        </div>
    </div>
</div>

<div class="section">
    <div class="header">
        <i class="results-serialization-settings-icon"></i>
        Serialization
    </div>

    <div class="body">
        <div class="row">
            <label class="col-3 col-form-label fw-bold"
                   for="max-depth-input"
                   title="The maximum depth to serialize.">
                Max Depth
            </label>
            <div class="col-9">
                <input type="number"
                       id="max-depth-input"
                       class="form-control d-inline-block"
                       value.bind="settings.results.maxSerializationDepth"
                       placeholder="Default: 64"
                       min="1"
                       max="1000"
                       oninput="validity.valid||(value='');"
                       style="max-width: 130px">
                <span class="text-muted">
                    (max: 1000)
                </span>
            </div>
        </div>
        <div class="row mt-2">
            <label class="col-3 col-form-label fw-bold"
                   for="max-collection-length"
                   title="The maximum number of collection items to serialize.">
                Max Collection Length
            </label>
            <div class="col-9">
                <input type="number"
                       id="max-collection-length"
                       class="form-control d-inline-block"
                       value.bind="settings.results.maxCollectionSerializeLength"
                       placeholder="Default: 1000"
                       min="1"
                       max="100000"
                       oninput="validity.valid||(value='');"
                       style="max-width: 130px">
                <span class="text-muted">
                    (max: 100,000 | Recommended: 1000)
                </span>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="header">
        <i class="theme-icon"></i>
        Appearance
    </div>

    <div class="body">
        <div class="sub-header">Font</div>
        <div class="body">
            <div class="form-check">
                <input id="font-system"
                       name="font"
                       class="form-check-input"
                       type="radio"
                       model.bind=""
                       checked.bind="settings.results.font">
                <label class="form-check-label" for="font-system">
                    System font
                </label>
            </div>
            <div class="form-check">
                <input id="font-monospace"
                       name="font"
                       class="form-check-input"
                       type="radio"
                       model.bind="'monospace'"
                       checked.bind="settings.results.font">
                <label class="form-check-label" for="font-monospace" style="font-family: monospace">
                    Monospace
                </label>
            </div>
        </div>
    </div>
</div>
